<template>
  <div class="category">
    <div class="top">
      <h3>文章分类</h3>
      <el-button type="primary" @click="isShow('add')"
        >添加分类</el-button
      >
    </div>
    <!-- 列表主体 -->
    <div class="bottom">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="序号" width="180"></el-table-column>
          <el-table-column
            prop="cate_name"
            label="项目名称"
            width="600"
          ></el-table-column>
          <el-table-column
            prop="cate_alias"
            label="分类别名"
            width="600"
          ></el-table-column>
          <el-table-column label="操作" width="400">
            <template #default="obj">
              <el-button type="primary" @click="isShow('edit', obj.row.id)">修改</el-button>
            <el-button type="danger" @click="isShow('del', obj.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- 弹框 -->
    <el-dialog :title="changeTitle" :visible.sync="dialogFormVisible">
      <!-- 删除 -->
      <span v-if="type === 'del'">确定要删除本条信息吗</span>
      <!-- 添加 -->
      <el-form :model="form" v-else>
        <el-form-item label="分类名称" :label-width="'120px'" porp="cate_name">
          <el-input v-model="form.cate_name"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" :label-width="'120px'" prop="cate_alias">
          <el-input v-model="form.cate_alias"></el-input>
        </el-form-item>
      </el-form>
      <!-- 添加按钮 -->
      <div slot="footer" class="dialog-footer" v-if="type === 'add'">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="addart">确 定</el-button>
      </div>
      <!-- 编辑按钮 -->
      <div slot="footer" class="dialog-footer" v-if="type === 'edit'">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editart">确认修改</el-button>
      </div>
      <!-- 删除按钮 -->
      <div slot="footer" class="dialog-footer" v-if="type === 'del'">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="del()">确认删除</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCategory, addCategory, getArticleInfo, editArticle, removeArticle } from '@/api/article'
export default {
  data () {
    return {
      tableData: [], // 列表数据
      dialogFormVisible: false, // 弹框开关
      type: 'add', // 弹窗类型
      form: {
        cate_name: '',
        cate_alias: ''
      }
    }
  },
  async created () {
    this.initData()
  },
  computed: {
    // 修改弹窗标题
    changeTitle () {
      let title = ''
      if (this.type === 'add') title = '添加分类'
      if (this.type === 'edit') title = '修改分类'
      if (this.type === 'del') title = '删除分类'
      return title
    }
  },
  methods: {
    // 渲染列表
    async initData () {
      const res = await getCategory()
      this.tableData = res.data
    },
    // 显示弹窗
    async isShow (type, id) {
      this.dialogFormVisible = true
      this.type = type
      // 修改弹窗需要回显
      if (type === 'edit') {
        // 回显
        const res = await getArticleInfo(id)
        this.form = res.data
      }
    },
    // 关闭弹窗
    closeDialog () {
      this.form = {}
      this.dialogFormVisible = false
    },
    // 添加类别
    async addart () {
      this.type = 'add'
      try {
        if (!this.form.cate_name || !this.form.cate_alias) {
          this.$message.error('输入内容不能为空')
          return
        }
        await addCategory(this.form)
        // 关闭弹窗
        this.dialogFormVisible = false
        // 清空表单
        this.form = { cate_name: '', cate_alias: '' }
        // 轻弹框
        this.$message.success('添加成功')
        // 重新渲染
        this.initData()
      } catch (e) {
        this.$message.error('添加失败')
      }
    },
    // 修改
    async editart () {
      await editArticle(this.form)
      // 弹窗
      this.$message.success('修改成功')
      // 关闭弹窗
      this.dialogFormVisible = false
      // 重新渲染
      this.initData()
    },
    // 删除
    async del () {
      this.type = 'del'
      const id = this.form.id
      console.log(id)
      const res = await removeArticle(id)
      console.log(res)
      // 弹窗
      this.$message.success('删除成功')
      // 关闭弹窗
      this.dialogFormVisible = false
      // 重新渲染
      this.initData()
    }
  }
}
</script>

<style lang="less" scoped>
.category {
  margin: 30px 30px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .bottom {
    margin-top: 30px;
  }
  /deep/.el-dialog {
    width: 25%;
  }
}
</style>
